<template>
  <div class="paySuccess">
    <Navtop></Navtop>
    <!-- <Navtwo></Navtwo> -->
    <div class="wrap">
      <header>
        <div class="title">收银台</div>
      </header>
      <main>
        <!-- <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="dontPayFn"
        >
          <span>是否取消支付</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="danger" @click="dialogVisible = false"
              >确 定</el-button
            >
          </span>
        </el-dialog> -->
        <div class="top">
          <div class="topLeft">
            <i class="el-icon-circle-check"></i>
          </div>
          <div class="topRight">
            <p>
              订单提交成功，请尽快完成付款!订单金额:<span
                >￥{{ info.sumPrice }}</span
              >
            </p>
            <p>
              请您在提交订单后<span style="color: skyblue">29分钟</span
              >内完成支付,否则订单会自动取消
            </p>
            <div class="line"></div>
            <p>订单详情<i class="el-icon-arrow-down"></i></p>
          </div>
        </div>
        <div class="center">
          <h3>平台支付</h3>
          <div class="payBox">
            <el-popover
              placement="bottom"
              width="200"
              trigger="click"
              content="非常抱歉，暂不支持"
            >
              <div class="box" slot="reference">
                <img src="../assets/Alipay.png" alt="支付宝支付" />
                <p>支付宝支付</p>
              </div>
            </el-popover>
            <el-popover placement="bottom" width="200" trigger="click">
              <qrcode-vue
                :size="size"
                :value="value"
                :logo="logo"
                :bgColor="bgColor"
                :fgColor="fgColor"
              ></qrcode-vue>
              <div class="box" slot="reference">
                <img src="../assets/wechatPay.png" alt="微信支付" />
                <p>微信支付</p>
              </div>
            </el-popover>
          </div>
          <h3>分期支付</h3>
          <div class="payBox">
            <el-popover
              placement="bottom"
              width="200"
              trigger="click"
              content="非常抱歉，暂不支持"
            >
              <div class="box" slot="reference">
                <img src="../assets/Alipay.png" alt="支付宝支付" />
                <p>支付宝分期支付</p>
              </div>
            </el-popover>
          </div>
          <div class="btnBox">
            <el-button type="danger" @click="dontPayFn">取消支付</el-button>
            <el-button type="success" @click="CheckSuccessFn"
              >支付成功</el-button
            >
          </div>
        </div>
      </main>
    </div>

    <BottomList></BottomList>
  </div>
</template>

<script>
import Navtop from "../components/navtop";
import Navtwo from "../components/navTwo.vue";
import BottomList from "../components/bottomList.vue";
import qrcodeVue from "qrcode-vue";
import { wechatpay, orderpay, Checkwechatpay } from "../api/test.js";

export default {
  data() {
    return {
      dialogVisible: false,
      visible: false,
      size: 128,
      bgColor: "#fff",
      fgColor: "#000",
      value: "",
      logo: "",
      id: 0,
      Orderid: 0,
      info: [],
    };
  },
  created() {
    // console.log(1);
    // console.log(JSON.parse(sessionStorage.getItem("OrderId")));
    this.info = JSON.parse(sessionStorage.getItem("OrderId"));
    let sum = 0;
    JSON.parse(this.info.goods_info).forEach((item2) => {
      console.log(item2);
      sum += item2.price * item2.num;
    });
    this.info.sumPrice = sum;
    // console.log(info);
    this.id = this.info.id;
    this.Orderid = this.info.order_id;
    console.log(this.info);
    this.forPayFn();
  },
  methods: {
    dontPayFn() {
      this.$confirm("是否取消支付?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          this.$router.push({ path: "/" });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    CheckSuccessFn() {
      console.log(this.Orderid);
      Checkwechatpay({ out_trade_no: `${this.Orderid}` })
        .then((res) => {
          if (res.data.result.trade_state === "SUCCESS") {
            orderpay({ id: this.id, status: 1 }).then((res) => {
              this.$message({
                message: "支付成功感谢支持",
                type: "warning",
              });
              this.$router.push({ path: "/realorder" });
            });
          } else {
            this.$message({
              message: "订单未支付请继续支付",
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async forPayFn() {
      // let res = await orderpay({
      //   id: this.id,
      //   status: 1,
      // });
      // console.log(res.data.data);
      await wechatpay({
        out_trade_no: `${this.Orderid}`,
        // project_id: 149,
      })
        .then((res2) => {
          this.value = res2.data.result.code_url;
        })
        .catch((err) => {
          console.log(err);
        });

      // wechatpay({
      //   out_trade_no: this.Orderid,
      // })
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
  },
  components: {
    BottomList,
    // Navtwo,
    Navtop,
    qrcodeVue,
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-color: rgb(247, 247, 245);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  header {
    width: 80%;
    .title {
      width: 100%;
      background-color: #fff;
      margin: 20px 0;
      line-height: 40px;
      font-size: 20px;
      height: 40px;
      font-weight: bolder;
    }
  }
  main {
    width: 80%;
    .top {
      display: flex;
      background-color: #fff;
      width: 100%;
      padding-top: 40px;
      // margin: 20px 0;
      .topLeft {
        i {
          font-size: 50px;
          color: rgb(116, 207, 73);
          margin: 0 40px;
        }
      }
      .topRight {
        text-align: left;
        .line {
          height: 2px;
          background: #f9f9f9;
          width: 170%;
        }
        p {
          &:first-child {
            font-size: 25px;
            // font-weight: bold;
            span {
              color: red;
            }
          }
          &:nth-child(2) {
            margin: 20px 0;
          }
          &:last-child {
            margin: 20px 0;
          }
        }
      }
    }
    .center {
      width: 100%;
      background-color: #fff;
      margin: 20px 0;
      text-align: left;
      box-sizing: border-box;
      padding: 20px;
      .payBox {
        display: flex;

        &:first-of-type {
          margin-bottom: 230px;
        }
        .box {
          width: 250px;
          height: 85px;
          border-radius: 5px;
          border: 1px solid #999;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 20px;
          img {
            width: 34px;
            height: 34px;

            margin: 0;
          }
          p {
            // display: inline/;
            line-height: 34px;
            vertical-align: middle;
          }
        }
      }
      .btnBox {
        margin-top: 50px;
        width: 100%;
        display: flex;
        justify-content: center;
        button {
          width: 200px;
          height: 70px;
          margin: 20px;
        }
      }
    }
  }
}
</style>